import React,{ lazy } from "react"
// Navigate重定向组件
import {Navigate} from "react-router-dom";
import Home from "@/pages/Home.tsx";
import Login from "@/pages/Login/index.tsx"
const Index = lazy(()=>import("@/pages/Index"))
const About = lazy(()=>import("@/pages/About"))
const Page1 = lazy(()=>import("@/pages/Page1"))
const Page2 = lazy(()=>import("@/pages/Page2/index.tsx"))
const Page301 = lazy(()=>import("@/pages/Page301"))
const Page302 = lazy(()=>import("@/pages/Page302"))

// 懒加载的模式的组件的写法，外面需要套一层 Loading 的提示加载组件
const withLoadingComponent = (comp:JSX.Element) => (
    <React.Suspense fallback={<div>Loading...</div>}>
        {comp}
    </React.Suspense>
)

// 左侧菜单
const routes = [
    {
        "path" : "/",
        "element" : <Navigate to="/index" />,
    },
    {
        "path" : "/",
        "element" : <Home/>,
        "children" : [
            {
                "path" : "/index",
                "element" : withLoadingComponent(<Index/>),
            },
            {
                "path" : "/about",
                "element" : withLoadingComponent(<About/>),
            },
            {
                "path" : "/page1",
                "element" : withLoadingComponent(<Page1/>),
            },
            {
                "path" : "/Page2",
                "element" : withLoadingComponent(<Page2/>),
            },
            {
                "path" : "/page301",
                "element" : withLoadingComponent(<Page301/>),
            },
            {
                "path" : "/page302",
                "element" : withLoadingComponent(<Page302/>),
            },
        ]
    },
    // 登录
    {
        path:"/Login",
        element: <Login />
    },
    // 访问其余路径的时候直接跳到首页
    {
        "path" : "*",
        "element" : <Navigate to="/index" />,
    },
];

export default routes;